<template>
  <div class="edit-table-wrapper">
    <el-operate-block class="mb-12">
      <template #actions>
        <el-button
          v-if="!isEdit"
          @click="handleEdit"
        >
          编辑
        </el-button>
        <el-button
          v-else
          @click="handleSave"
        >
          保存
        </el-button>
      </template>
    </el-operate-block>
    <el-form
      ref="editForm"
      :model="form"
    >
      <el-table
        :data="form.tableData"
        style="width: 100%;"
        empty-text="暂无数据"
        :class="isEdit ? 'edit-table' : 'view-table'"
        border
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="地区项目"
          prop="projectName"
          :min-width="120"
        >
          <template #default="{ row, $index }">
            <el-form-item
              v-if="isEdit"
              :show-message="true"
              :prop="`tableData.${$index}.projectName`"
              :rules="rules.projectName"
            >
              <el-input
                v-model="row.projectName"
                type="input"
                maxlength="30"
                placeholder="请输入"
              />
            </el-form-item>
            <div v-else>
              {{ row.projectName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="认购达成(万元)"
          prop="subscriptionNum"
          :min-width="130"
        >
          <template #default="{ row, $index }">
            <el-form-item
              v-if="isEdit"
              :show-message="true"
              :prop="`tableData.${$index}.subscriptionNum`"
              :rules="rules.subscriptionNum"
            >
              <el-input
                v-model="row.subscriptionNum"
                type="input"
                maxlength="30"
                placeholder="请输入"
              />
            </el-form-item>
            <div v-else>
              {{ row.subscriptionNum }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="签约达成(万元)"
          prop="signContractNum"
          :min-width="130"
        >
          <template #default="{ row, $index }">
            <el-form-item
              v-if="isEdit"
              :show-message="true"
              :prop="`tableData.${$index}.signContractNum`"
              :rules="rules.signContractNum"
            >
              <el-input
                v-model="row.signContractNum"
                type="input"
                maxlength="30"
                placeholder="请输入"
              />
            </el-form-item>
            <div v-else>
              {{ row.signContractNum }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="签约目标(万元)"
          prop="contractTarget"
          :min-width="130"
        >
          <template #default="{ row, $index }">
            <el-form-item
              v-if="isEdit"
              :show-message="true"
              :prop="`tableData.${$index}.contractTarget`"
              :rules="rules.contractTarget"
            >
              <el-input
                v-model="row.contractTarget"
                type="input"
                maxlength="30"
                placeholder="请输入"
              />
            </el-form-item>
            <div v-else>
              {{ row.contractTarget }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="模式"
          prop="pattern"
          :min-width="100"
        >
          <template #default="{ row, $index }">
            <template
              v-if="isEdit"
            >
              <el-form-item
                :show-message="true"
                :prop="`tableData.${$index}.pattern`"
                :rules="rules.pattern"
              >
                <el-select
                  v-model="row.pattern"
                  clearable
                >
                  <el-option
                    v-for="(item) in patternList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </template>
            <div v-else>
              {{ row.pattern }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="创建日期"
          prop="createDate"
          :min-width="120"
        >
          <template #default="{ row, $index }">
            <el-form-item
              v-if="isEdit"
              :show-message="true"
              :prop="`tableData.${$index}.createDate`"
              :rules="rules.createDate"
            >
              <el-date-picker
                v-model="row.createDate"
                type="date"
                format="YYYY-MM-DD"
                placeholder="请选择日期"
                @change="handleChangeDate(row)"
                @clear="handleClearDate(row)"
              />
            </el-form-item>
            <div v-else>
              {{ row.createDate }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100"
        >
          <template #default="{ $index }">
            <el-button
              link
              type="primary"
              size="small"
              class="delete-button"
              @click="handleDelete($index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <base-pagination
      :total="total"
      @do-change="pageChangeHandle"
    />
  </div>
</template>

<script lang="ts" setup name='edit-table'>
import {
  reactive,
  ref,
  onMounted,
} from 'vue';

import {
  ElTable,
  ElMessage,
  ElMessageBox,
} from 'hive-plus';

import type { FormRules } from 'hive-plus';

import BasePagination from '@/components/base-pagination/index.vue';
import { parseTime } from '@/utils/index';

interface TableDataItem {
  projectName: string
  subscriptionNum: number
  signContractNum: number
  contractTarget: number
  pattern: string
  createDate: string
  index: number
}

interface Form {
  tableData: TableDataItem[]
}

const tableDataTemp = [
  {
    projectName: 'A-馆-A',
    subscriptionNum: 84,
    signContractNum: 234234,
    contractTarget: 2434,
    pattern: '模式一',
    createDate: '2024-01-24',
    index: 1,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8,
    signContractNum: 2534,
    contractTarget: 2434,
    pattern: '模式二',
    createDate: '2024-01-02',
    index: 2,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 4234,
    contractTarget: 2434,
    pattern: '模式二',
    createDate: '2024-01-04',
    index: 3,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 34,
    contractTarget: 2434,
    pattern: '模式三',
    createDate: '2024-01-05',
    index: 4,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 894,
    signContractNum: 74,
    contractTarget: 2434,
    pattern: '模式二',
    createDate: '2024-01-12',
    index: 5,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 44,
    signContractNum: 4,
    contractTarget: 2434,
    pattern: '模式一',
    createDate: '2024-01-03',
    index: 6,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 24,
    signContractNum: 23,
    contractTarget: 2434,
    pattern: '模式二',
    createDate: '2024-01-24',
    index: 7,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 224,
    signContractNum: 24,
    contractTarget: 2434,
    pattern: '模式三',
    createDate: '2024-01-12',
    index: 6,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 14,
    signContractNum: 94,
    contractTarget: 2434,
    pattern: '模式二',
    createDate: '2024-01-16',
    index: 7,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 214,
    contractTarget: 2434,
    pattern: '模式二',
    createDate: '2024-01-18',
    index: 6,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 3434,
    contractTarget: 2434,
    pattern: '模式一',
    createDate: '2024-01-19',
    index: 7,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 834,
    contractTarget: 2134,
    pattern: '模式二',
    createDate: '2024-01-25',
    index: 6,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 3434,
    contractTarget: 2434,
    pattern: '模式一',
    createDate: '2024-01-19',
    index: 7,
  },
  {
    projectName: 'A-馆-A',
    subscriptionNum: 8234,
    signContractNum: 834,
    contractTarget: 2134,
    pattern: '模式二',
    createDate: '2024-01-25',
    index: 6,
  }
];

const rules = reactive<FormRules>({
  projectName: [{ required: true, message: '请输入地区项目', trigger: 'blur' }],
  subscriptionNum: [{ required: true, message: '请输入认购达成', trigger: 'blur' }],
  signContractNum: [{ required: true, message: '请输入签约达成', trigger: 'blur' }],
  contractTarget: [{ required: true, message: '请输入签约目标', trigger: 'blur' }],
  pattern: [{ required: true, message: '请选择模式', trigger: 'change' }],
  createDate: [{ required: true, message: '请选择创建日期', trigger: 'change' }],
});

const editForm = ref();
const isEdit = ref(false);

const form: Form = reactive({
  tableData: [],
});

const total = ref(1);
const pageNum = ref(1);
const pageSize = ref(10);

  type MyPatternList = {
    value: string;
    label: string;
  };

const patternList: MyPatternList[] = [
  {
    value: '模式一',
    label: '模式一',
  },
  {
    value: '模式二',
    label: '模式二',
  },
  {
    value: '模式三',
    label: '模式三',
  }
];

const handleEdit = () => {
  isEdit.value = true;
};

const handleSave = () => {
  editForm.value.validate((valid: boolean) => {
    if (valid && isEdit.value) {
      isEdit.value = false;
    }
  });
};

const initLoadData = (firstPage = false) => {
  if (firstPage) {
    pageNum.value = 1;
  }
  const start = (pageNum.value - 1) * pageSize.value;
  const end = pageNum.value * pageSize.value;
  form.tableData = tableDataTemp.slice(start, end);
  total.value = tableDataTemp.length;
};

const pageChangeHandle = (params: {currentPage: number, pageSize: number}) => {
  pageNum.value = params.currentPage;
  pageSize.value = params.pageSize;

  initLoadData();
};

const handleDelete = (index: number) => {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '关闭',
    }
  ).then(() => {
    form.tableData.splice(index, 1);
    ElMessage.success('删除成功');
  }).catch(() => {
    console.log('用户点击取消删除');
  });
};

const handleChangeDate = (row: any) => {
  row.createDate = parseTime(row.createDate, '{y}-{m}-{d}');
};

const handleClearDate = (row: any) => {
  row.createDate = null;
};

onMounted(() => {
  initLoadData(true);
});

</script>
<style lang="scss" scoped>
.edit-table-wrapper {
  box-sizing: border-box;
  padding: 12px;
}

.operate-button {
  margin: 10px 0;
  text-align: right;
}

.edit-table {
  :deep(.#{$namespace}-table__cell) {
    padding: 12px 0 2px;
  }

  :deep(.#{$namespace}-form-item) {
    margin-bottom: 14px !important;
  }

  :deep(.#{$namespace}-table__cell .#{$namespace}-button) {
    margin-bottom: 15px;
  }
}

</style>
